<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>task01 零基础HTML编码</title>
    <link rel="stylesheet" type="text/css" href="common/normalize.css">
</head>

<body>
    <h1>网站一级标题</h1>
    <ul>
        <li><a href="#">导航链接一</a></li>
        <li><a href="#">导航链接二</a></li>
        <li><a href="#">导航链接三</a></li>
        <li><a href="#">导航链接四</a></li>
    </ul>
    <h2>文章一级标题</h2>
    <h3>文章二级标题</h3>
    <span>文章作者</span>
    <span>文章发表时间</span>
    <p>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，还行了
        <br>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，<a href="http://ife.baidu.com">这里有一个链接到http://ife.baidu.com</a>这是一个很长很长的段落，这是一个很长很长的段落，<strong>这里有个粗体字</strong>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落。</p>
    <img src="img/logo.png" alt="logo">
    <p>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，还行了
        <br>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，<a href="http://ife.baidu.com" target="_blank">这里有一个链接点击后打开新窗口链接到http://ife.baidu.com</a>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，<strong>这里有个粗体字</strong>这是一个很长很长的段落，这是一个很长很长的段落。</p>
    <h2>另外一篇文章一级标题</h2>
    <h3>文章二级标题</h3>
    <span>文章作者</span>
    <span>文章发表时间</span>
    <p>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，还行了
        <br>这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，这是一个很长很长的段落，<a href="http://ife.baidu.com">这里有一个链接到http://ife.baidu.com</a>这是一个很长很长的段落，这是一个很长很长的段落，<strong>这里有个粗体字</strong>这是一个很长很长的段落，这是一个很长很长的段落。
        <br><img src="img/logo.png" alt="logo">
        <br>
    </p>
    <ul>
        <li>列表项目一</li>
        <li>列表项目二</li>
        <li>列表项目三</li>
    </ul>
    <h3>图片</h3>
    <p>好看的图片</p>
    <img src="img/logo.png" alt="logo">
    <p>好看的图片</p>
    <img src="img/logo.png" alt="logo">
    <p>好看的图片</p>
    <img src="img/logo.png" alt="logo">
    <p>好看的图片</p>
    <img src="img/logo.png" alt="logo">
    <p>好看的图片</p>
    <img src="img/logo.png" alt="logo">
    <p>好看的图片</p>
    <img src="img/logo.png" alt="logo">
    <p>好看的图片</p>
    <img src="img/logo.png" alt="logo">
    <h2>最后一篇文章一级标题</h2>
    <h3>文章二级标题</h3>
    <span>文章作者</span>
    <span>文章发表时间</span>
    <ol>
        <li>排名1</li>
        <li>排名2</li>
        <li>排名3</li>
    </ol>
    <p>下面是一个表格，给表格加了一个border="1"好让你看出来是一个表格</p>
    <table>
        <tr>
            <th>表头</th>
            <th>表头</th>
            <th>表头</th>
        </tr>
        <tr>
            <td>表内容单元格</td>
            <td>表内容单元格</td>
            <td><a href="#">操作</a></td>
        </tr>
        <tr>
            <td>表内容单元格</td>
            <td>表内容单元格</td>
            <td><a href="#">操作</a></td>
        </tr>
        <tr>
            <td>表内容单元格</td>
            <td>表内容单元格</td>
            <td><a href="#">操作</a></td>
        </tr>
        <tr>
            <td>表内容单元格</td>
            <td>表内容单元格</td>
            <td><a href="#">操作</a></td>
        </tr>
        <tr>
            <td>总计</td>
            <td colspan="2">1000</td>
        </tr>
    </table>
    <h2>这里以后是个侧栏，这是侧栏的标题</h2>
    <h3>侧栏注册窗口标题</h3>
    <form method="post" action="#">
        <label for="mail_address">请输入邮箱地址：</label>
        <input type="text" id="mail_address" value="这是一个文本输入框" name="mail_address" />
        <p>邮箱地址请按要求格式输入</p>
        <label for="password">请输入密码：</label>
        <input type="text" id="password" value="这是一个文本输入框" />
        <label for="confirm-password">请重复输入密码：</label>
        <input type="text" id="confirm-password" value="这是一个文本输入框" name="password" />
        <p>密码请为6-16位英文数字</p>
        <span>性别：</span>
        <input type="radio" name="sex" value="男" checked="checked" />男
        <input type="radio" name="sex" value="女" />女
        <span>城市</span>
        <select name="cities">
            <option>北京</option>
            <option>长沙</option>
            <option>娄底</option>
            <option>怀化</option>
        </select>
        爱好
        <input type="checkbox" />运动
        <input type="checkbox" />艺术
        <input type="checkbox" />科学
        <span>个人描述</span>
        <textarea>这是一个多行输入框，输入您的个人描述</textarea>
        <input type="button" name="submit" value="确认提交" />
    </form>
    <p>版权所有©</p>
</body>

</html>
